<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<form action="SearchProduct" method="post">
    <head>

        <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen"/>
        <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"/>
        <title>MyPetStore</title>
        <meta content="text/html; charset=windows-1252"
              http-equiv="Content-Type"/>
        <meta http-equiv="Cache-Control" content="max-age=0"/>
        <meta http-equiv="Cache-Control" content="no-cache"/>
        <meta http-equiv="expires" content="0"/>
        <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
        <meta http-equiv="Pragma" content="no-cache"/>
        <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    </head>

    <body>

    <div id="Header">

        <div id="Logo">
            <div id="LogoContent">
                <a href="main"><img src="images/logo-topbar.gif"/></a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
                <a href="viewCart"><img align="middle" name="img_cart" src="images/cart.gif" alt="view your cart"/></a>
                <img align="middle" src="images/separator.gif"/>
                <c:if test="${sessionScope.loginUser==null}">
                    <a href="loginForm">Sign In</a>
                </c:if>
                <c:if test="${sessionScope.loginUser!=null}">
                    <a href="out">Sign Out</a>
                </c:if>
                <img align="middle" src="images/separator.gif"/>
                <a href="myAccount">My Account</a>
                <img align="middle" src="images/separator.gif"/>
                <a href="./help.html">?</a>
                <br>
                <p id="loginUser" value="${sessionScope.loginUser.username}"></p>
            </div>
        </div>

        <div id="SearchProductcontext" style="background-color:white; border: 1px solid black;
        width:119px;position: absolute;top: 50px;left:1116px;display:none">
        </div>
        <div id="Search">
            <div id="SearchContent">
                <form action="search" method="post">
                    <input type="text" name="keyword" size="14" id="searchproduct"/>
                    <input type="submit" name="searchProducts" value="Search"/>
                    <script type="text/javascript">
                        $(function () {
                            $('#searchproduct').on('keyup', function () {
                                $.ajax({
                                    type: "GET",
                                    url: "findProduct?keyword=" + this.value,
                                    success: function (data) {
                                        console.log(data);
                                        var res = data.split(",");
                                        var result = "";
                                        for (var i = 0; i < res.length; i++) {
                                            result += "<div onclick='Search_onclick(this)' onmouseout='changeBgc_out(this)' " +
                                                "onmouseover='changeBgc_over(this)'>" + res[i] + "</div>";

                                        }
                                        $("#SearchProductcontext").html(result);
                                        //以块级元素显示
                                        $("#SearchProductcontext").css("display", "block");
                                    }
                                });
                            });


                        });

                        //鼠标移动到内容上
                        function changeBgc_over(div) {
                            $(div).css("background-color", "#CCCCCC");
                        }

                        //鼠标离开内容
                        function changeBgc_out(div) {
                            $(div).css("background-color", "");
                        }

                        //将点击的内容放到搜索框
                        function Search_onclick(div) {
                            $("#searchproduct").val(div.innerText);
                            $("#SearchProductcontext").css("display", "none");
                        }
                    </script>
                </form>
            </div>
        </div>
        <div id="QuickLinks">
            <a href="ViewCategory?categoryId=FISH"><img
                    src="images/sm_fish.gif"/></a> <img src="images/separator.gif"/>
            <a href="ViewCategory?categoryId=DOGS"><img
                    src="images/sm_dogs.gif"/></a> <img src="images/separator.gif"/>
            <a href="ViewCategory?categoryId=REPTILES"><img
                    src="images/sm_reptiles.gif"/></a> <img
                src="images/separator.gif"/> <a href="ViewCategory?categoryId=CATS"><img
                src="images/sm_cats.gif"/></a> <img src="images/separator.gif"/>
            <a href="ViewCategory?categoryId=BIRDS"><img
                    src="images/sm_birds.gif"/></a>
        </div>


    </div>

    <div id="Content">
</form>